<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorate="~{portal/layout}">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="author" th:content="${#servletContext.getAttribute('paramMap')['author']}">
    <title th:text="${#servletContext.getAttribute('paramMap')['blogName']}">个人博客</title>
    <meta name="description" th:content="${#servletContext.getAttribute('paramMap')['description']}" />
    <meta name="keywords" th:content="${#servletContext.getAttribute('paramMap')['keywords']}" />
    <link th:href="@{/admin/assets/plugins/sweetalert/dist/sweetalert.css}" rel="stylesheet" type="text/css">
</head>

<body class="home blog custom-background round-avatars">

<div id="main" class="content" layout:fragment="content">
    <div class="container">
        <article id="post-2" class="js-gallery post-2 page type-page status-publish has-post-thumbnail hentry">
            <section class="post_content">
                <header class="post_header">
                    <h1 class="post_title">街坊留言</h1>
                </header>

                <div class="meta split split--responsive cf" style="display: block;">
                    <div class="slide">
                        <a class="btn-slide" title="switch down"><i class="iconfont">&#xe615;</i>折叠留言区</a>
                    </div>
                </div>
            </section>
        </article>
    </div>
    <div id="panel">
        <div class="comment-area">
            <section class="comments">
                <div class="comments-main">
                    <div id="comments-list-title">
                        <span>[[${totalCount}]]</span> 条留言/回复
                        <span style="float: right"><input type="button" class="button" id="guestbookBtn" value="留言" /></span>
                    </div>
                    <div id="loading-comments">
                        <div class="host">
                            <div class="loading loading-0"></div>
                            <div class="loading loading-1"></div>
                            <div class="loading loading-2"></div>
                        </div>
                    </div>
                    <hr>
                    <ul class="commentwrap">
                        <li class="comment even thread-even depth-1" id="li-comment-" th:each="guestbook : ${pageInfo.list}">
                            <div class="comment_body contents">
                                <div class="profile">
                                    <a href="javascript:void(0)"><img th:src="${guestbook.imgUrl}" class="gravatar" th:alt="${guestbook.nickname}"></a>
                                </div>
                                <div class="main shadow" style="border-bottom: 1px solid #eee">
                                    <div class="commentinfo">
                                        <section class="commeta">
                                            <div class="shang">
                                                <h4 class="author"><a th:href="'#' +${guestbook.nickname}" th:id="${guestbook.nickname}"><img th:src="${guestbook.imgUrl}" class="gravatarsmall" th:alt="${guestbook.nickname}">[[${guestbook.nickname}]] :</a></h4>
                                            </div>
                                        </section>
                                    </div>
                                    <div class="body">
                                        <p style="padding: 10px 5px;">[[${guestbook.content}]]</p>
                                    </div>
                                    <div class="xia info">
                                        <span><time >[[${#dates.format(guestbook.createTime, 'yyyy年MM月dd日 HH:mm:ss')}]]</time></span>
                                        <span><a rel='nofollow' th:data-guestbookid="${guestbook.id}" class='comment-reply-link replyBtn' href='javascript:void(0)' aria-label='回复'>回复([[${#lists.size(guestbook.replyList)}]])</a> <a th:if="${#lists.size(guestbook.replyList) > 0}" href="javascript:void(0)" th:data-id="${guestbook.id}" style="cursor: pointer;color: #A1A1A1" class="showbtn">折叠回复</a></span>
                                    </div>
                                </div>
                                <div th:replace="portal/common :: reply(${guestbook.replyList},${guestbook.nickname},${guestbook.id})"></div>
                            </div>
                        </li>
                        <li th:if="${pageInfo.size == 0}" th:style="'text-align:center;'" th:text="'~~暂无数据，抢先留言吧~~'"></li>
                    </ul>
                    <nav class="pagination" th:if="${pageInfo.size > 0}">
                        <span th:if="${pageInfo.hasPreviousPage}">
							<a class="prev page-numbers" th:href="@{${pageInfo.pageNum-1} == 1? '/guestbook/' : '/guestbook/page/' + ${pageInfo.pageNum-1}+'/'}" ><strong>←</strong></a>
						</span>
                        <span th:each="pageNum : ${pageInfo.navigatepageNums}">
							<span th:if="${pageNum == pageInfo.pageNum}">
								<a href="javascript:void(0)" th:text="${pageNum}" class="page-numbers current"></a>
							</span>
							<span th:if="${pageNum != pageInfo.pageNum}">
								<a th:href="@{${pageNum} == 1 ? '/guestbook/':'/guestbook/page/' + ${pageNum}+'/'}" th:text="${pageNum}" class="page-numbers"></a>
							</span>
						</span>
                        <span th:if="${pageInfo.hasNextPage}">
							<a class="next page-numbers" th:href="@{'/guestbook/page/' + ${pageInfo.pageNum+1}+'/'}" ><strong>→</strong></a>
						</span>
                    </nav>
                </div>
            </section>
        </div>
    </div>
    <div class="wrapper">
    </div>
    <script type='text/javascript' th:src='@{/portal/js/jquery.min.js}'></script>
    <script type='text/javascript' th:src="@{/admin/assets/plugins/sweetalert/dist/sweetalert.min.js}"></script>
    <script type='text/javascript' th:src='@{/portal/js/layer/layer.js}'></script>
    <div th:if="${#strings.isEmpty(#servletContext.getAttribute('paramMap')['geetest_id']) eq true}">
        <script type='text/javascript' th:src='@{/portal/js/guestbook.js}'></script>
    </div>
    <div th:if="${#strings.isEmpty(#servletContext.getAttribute('paramMap')['geetest_id']) eq false}">
        <script type='text/javascript' th:src="@{/admin/assets/plugins/geetest/gt.js}"></script>
        <script type='text/javascript' th:src='@{/portal/js/guestbook-gt.js}'></script>
    </div>
</div>
</body>

</html>